UI Design: E Publishing Website
Overview
For this project, I was tasked with creating a UI solution for an e publishing website. The project requirements were 6 pages, each with specific elements that needed to be included on them. Throughout this entire course, all of our projects were team based. However, this project was completed solo. Though I really enjoy working in a team, I was excited to work on a project by myself so I had the chance to really demonstrate my style through the design.
Research
Before this project, I had never used an e publishing website before, so I initially had no idea what one should look like. I wanted to make sure that I understood the type of functionality users needed from a website like this, so I looked at existing e publishing websites to gain some insight and inspiration.
End-User Goals
- Users want to use this platform to create something.
- Users want to make more money by self-publishing instead of going through the traditional route.
- They keep all the rights and royalties, which isn’t the case if you have a publisher.
- Users want more creative control.
- Create their own cover design
- Be in control of marketing
- Be in control of editing/layout
- Users want to publish their content.
- eBooks
- Print books
- Some users may only want to print books for personal use.
Context of Use Descriptions
First Time Users
These users will be using this website on either a desktop computer or a laptop. Therefore, they could either work on self-publishing from the comfort of their home, or anywhere that they can bring their laptop. First-time users might be more comfortable using this website from home initially. Self-publishing a book for the first time is a large task, so they might feel more comfortable doing it in a familiar environment. They might also prefer to work on it at home in case they feel shy about their work, and don’t want to work in a public place where people might be able to see what they’re doing. These users might feel anxiety about publishing their first book. Never having published a book before, on top of taking on the full responsibility of publishing it themselves, is probably very stressful. These users might also feel very excited to self-publish their first book, since it’s a pretty big accomplishment.
Recurring Users
These users will also be using this website on either a desktop computer or a laptop. Therefore, they could either work on self-publishing from the comfort of their home, or anywhere that they can bring their laptop. These users probably feel comfortable with the way the website works since they have self-published before. They might be more inclined to use this site on the go, working on it little by little throughout the day wherever they have a little bit of time to spare. These users might feel less stressed or emotional about the publishing process, since they have done it previously and are doing it again.
site Map
Since each of the 6 pages needed to include specific functionality, I decided to create a site map to help me understand how each page would work. These also helped me organize the structure of the pages so that I would not forget to include anything on them.
Login
Publication Manager
Cover Editor
Layout Editor
Illustration Editor
Publish Page
Ideation
Sketches
I created many different sketches of possible ideas for screen designs. Below are just some of my many sketches!
Wireframes
Based on my sketches, I created some hand drawn wireframes to get a better idea of what each page would look like.
Low Fidelity Design
Based on my wireframes, I added some more detail in these low fidelity designs. This was my final step before actually creating my design in Adobe Photoshop.
Solution
My final solution for this class project was 6 high fidelity screen designs created in Adobe Photoshop. Check them out below!
Login Page
Publication Manager Page
Cover Design Page
Illustrations Page
Layout Page
Publish Page
Heuristic Specifications
Visibility of System Status
All of the clickable buttons, links, and navigational elements of the pages I designed would change color on mouse hover, and change to a darker color when clicked. These features are important on a site, so that the user knows that the system recognized their action of clicking on something. Also, I added a status bar to the process of creating a book, so that the user knows what step they’re on, as well as what steps they’ve completed and which are next. This was intended to keep the user aware of where they are, and also so they don’t get frustrated wondering how many steps in the process are left.
Match between System and Real World
I used real world terminology throughout my pages and on my buttons. I tried to make the titles of everything as simple and concise as possible so that there would be no confusion. I also tried to make my descriptions fun by using more casual language, because I thought it would appeal to the user base (creatives), as well as making the process seem less daunting to new-comers. The descriptions weren’t very long and didn’t take up much space, so people who aren’t new to the site could skip past it without feeling like it was in their way. I also used icons that are easily recognizable.
User Control and Freedom
From any screen, users will have the top navigation bar displayed so that they can easily get to a different page. Within the “create a book” process, users can skip through the different steps as they please, as well as being able to get back to a different page from the top navigation bar. Additionally, there are “back” and “save and continue” buttons on the bottom of every step, so that users can easily get back or go to the next page. I also provided users with the freedom to upload their own cover designs, manuscripts, and images, so that they can put anything they wanted into their book. I thought this would be an important functionality to have so that no users felt like their creativity was being hindered by the website.
Consistency and Standards
I stayed consistent throughout my pages by establishing a color scheme, as well as having the same top navigation bar on every screen. This created cohesion throughout my pages, so that the user would not feel like anything is sticking out as a major inconsistency across pages.
Error Prevention
I provided short instructions for each step of the process, as well as links for detailed help. I also made the process of creating a book a process with steps. Users may skip around the steps as they please, but a new-comer could follow through the steps in order for more guidance. I think it’s important to take as much stress off of the users as possible, because this task could seem daunting.
Recognition rather than Recall
The process of creating a book has steps in order, because I wanted to make the process as easy for the users as possible, particularly for the new users. The steps give them an idea of what step they’re currently working on, and what steps they need to complete before they can publish their book. Also, the publication manager page shows the most recently edited book in progress. When they click on the “continue” button, it will immediately take them to the last step they were working on. This way, the user can come back from not working on their book for a while and not have to try to remember where they left off.
Flexibility and Efficiency of Use
As previously stated, I created steps for the users to follow when creating their book. A new user could follow through the steps chronologically, getting help from all the links provided so they get a feel for how to self-publish a book. A recurring user can skip through the steps as they please, or jump to a certain step from the publication manager page. This keeps the process flexible, allowing the users to find a way that works for them.
Aesthetic and Minimalistic Design
I tried to create a clean and simple design that doesn’t distract the users from the task at hand. I used a color scheme that feels modern and fun, but isn’t straining on the eyes since users will most likely spend a decent amount of time on the website.
Reflections
Enjoying the Process
I had a lot of fun creating the screen designs for this project! I especially love creating the high fidelity design in Photoshop, that’s definitely always my favorite part of the process. I find myself losing track of time and spending hours perfecting each and every little detail. Whenever I do this kind of project, it always reminds me of how much I truly enjoy designing!
Challenges
One of my biggest challenges with this project was trying to visualize how each of the different pages would work. Since I have never used a self-publishing website before, I wasn’t really sure what was necessary for a site like this to work. Looking at some existing self-publishing websites helped me get a better idea of what my website needed. Also, creating a task flow for each page helped me organize the content and create a better design!